import QtQuick 2.0
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtWebEngine 1.5
import ClockController 1.0
import '../../widget'
import '../../labels'

StackPage {
    id:window

    property double lat;
    property double lng;

    tabIndex:0

    Component.onCompleted: {
        var user_id = settings.value("user/pid","0")
        clockController.slot_stattoday_req(user_id)
    }

    function getCurrentTime(){
        var date = new Date()
        var hours = date.getHours()>=10?date.getHours():'0'+date.getHours()
        var minutes = date.getMinutes()>=10?date.getMinutes():'0'+date.getMinutes()
        var seconds = date.getSeconds()>=10?date.getSeconds():'0'+date.getSeconds()
        return hours+':'+minutes+':'+seconds
    }



    ClockController{
        id:clockController
    }

    ColumnLayout{
        anchors.fill: parent
        spacing:0

        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 40


            ReturnImg{
                onClicked: {
                    window.pop();
                }
            }

            TitleLabel {
                text: qsTr("签到")
                anchors.fill: parent
            }
        }

        Rectangle{
            Layout.fillWidth: true
            Layout.preferredHeight: 40

            ContentLabel{
                text:settings.value("user/department","")+" "+settings.value("user/name","")
                anchors{
                    verticalCenter: parent.verticalCenter
                    left:parent.left
                    leftMargin: 15
                }
            }

            TitleLabel{
                text:"2018-03-14"
                anchors{
                    verticalCenter: parent.verticalCenter
                    right:listDownImg.left
                    rightMargin: 10
                }
            }

            Image{
                id:listDownImg
                source:"qrc:/img/list_down.png"
                sourceSize:Qt.size(20,20)
                anchors{
                    verticalCenter: parent.verticalCenter
                    right:parent.right
                    rightMargin: 15
                }
            }
        }

        ContentLabel{
            Layout.fillWidth: true
            Layout.preferredHeight: 40
            Layout.leftMargin: 15
            horizontalAlignment: Text.AlignLeft
            text:"签到时间和位置"
        }

        ListView{
            id:listView
            model:clockController.clockStatSlotModel

            Layout.fillWidth: true
            Layout.preferredHeight: 200
            Layout.leftMargin:15

            delegate: Rectangle{
                width:listView.width
                height:45

                ColumnLayout{

                    RowLayout{

                        Rectangle{
                            width:10
                            height:10
                            radius:this.width/2
                            color:"#2A9CFF"
                        }

                        ContentLabel{
                            text:"签到时间08:26:32"
                            color:"#3A4654"
                            Component.onCompleted: {
                                var thisbehavior = isClockOn?"签到":"签退"
                                text = thisbehavior+"时间"+time
                            }
                        }
                    }

                    ContentLabel{
                        text:place
                        Layout.leftMargin: 15
                    }
                }
            }

            footer: Rectangle{
                width:listView.width
                height: 30

                ColumnLayout{
                    anchors.fill:parent
                    RowLayout{

                        Rectangle{
                            Layout.preferredHeight: 10
                            Layout.preferredWidth:10
                            radius:this.width/2
                            color:"#2A9CFF"
                        }

                        ContentLabel{
                            text:listView.count/2==0?"签到":"签退"
                            color:"#3A4654"
                        }
                    }

                    Rectangle{
                        id:clock
                        color:"#BEE1FF"
                        Layout.preferredHeight:130
                        Layout.preferredWidth:130
                        Layout.alignment:Qt.AlignHCenter
                        Layout.bottomMargin:15
                        radius:this.width/2

                        Rectangle{
                            color:"#2A9CFF"
                            width:parent.width*0.8
                            height:parent.height*0.8
                            anchors.centerIn:parent
                            radius:this.width/2

                            MouseArea{
                                anchors.fill: parent
                                onClicked: {
                                    window.toUrl("qrc:/work/clock/ClockRedirect.qml",{
                                                     "time":timeLabel.text,
                                                     "place":placeInfoLabel.text
                                                 })
                                }
                            }

                            ColumnLayout{
                                anchors.centerIn:parent

                                TitleLabel{
                                    Layout.alignment:Qt.AlignHCenter
                                    text:listView.count/2==0?"签到":"签退"
                                    color:"#ffffff"
                                }

                                TitleLabel{
                                    id:timeLabel
                                    text:getCurrentTime()
                                    color:"#BEE1FF"
                                    Layout.alignment:Qt.AlignHCenter

                                    Timer {
                                            id: timer_button;
                                            repeat: true //是否重复定时,默认为false
                                            running: true //是否开启定时，默认是false，当为true的时候，进入此界面就开始定时
                                            triggeredOnStart: false // 是否开启定时就触发onTriggered，一些特殊用户可以用来设置初始值。
                                            onTriggered: {  //定时触发槽,定时完成一次就进入一次
                                                timeLabel.text = getCurrentTime()
                                            }
                                            //restart ,start,stop,定时器的调用方式，顾名思义
                                        }
                                }
                            }
                        }
                    }
                }
            }
        }





        Rectangle{
            Layout.fillWidth: true
            Layout.preferredHeight: 200
            color:"#F8F8F8"

            ColumnLayout{
                anchors.fill:parent


                Rectangle{
                    Layout.fillWidth: true
                    Layout.preferredHeight:50

                    ContentLabel{
                        id:placeInfoLabel
                        text:""
                        width:130
                        elide:Text.ElideRight
                        anchors{
                            left:parent.left
                            leftMargin: 20
                        }
                    }

                    ContentLabel{
                        text:"地点微调"
                        color:"#2A9CFF"
                        anchors{
                            right:parent.right
                            rightMargin: 20
                        }

                        MouseArea{
                            onClicked: {
                                window.toUrl("qrc:/work/clock/ClockTrim.qml",{"lat":window.lat,"lng":window.lng})
                            }
                            anchors.fill:parent
                        }
                    }
                }

                WebEngineView{
                    id:webEngineView

//                    onLoadingChanged: {
//                        if(!webEngineView.loading){
//                            runJavaScript("getResult()",function(result){
//                                var res = JSON.parse(result)
//                                placeInfoLabel.text = res.formattedAddress
//                                window.lat = res.position.lat
//                                window.lng = res.position.lng
//                            })
//                        }
//                    }

                    Layout.preferredWidth: window.width*0.8
                    Layout.preferredHeight: 210
                    Layout.alignment:Qt.AlignHCenter
                    url:"qrc:/maps/map.html"

                }
            }
        }

        Rectangle{
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
    }
}
